@-webkit-keyframes car {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(115%);
        transform: translateX(115%);
        visibility: hidden;
    }
}

@keyframes car {
    0% {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(115%);
        -ms-transform: translateX(115%);
        transform: translateX(115%);
        visibility: hidden;
    }
}
@-webkit-keyframes smart {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes smart {
    0% {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    100% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 0px rgba(72, 106, 170, 0.5);
    }

    100% {
        -webkit-box-shadow: 0 0 50px #f5db42;
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 0px rgba(72, 106, 170, 0.5);
    }

    100% {
        box-shadow: 0 0 50px #f5db42;
    }
}

@-webkit-keyframes glow1 {
    0% {
        -webkit-transform: translateX(-20%);
        transform: translateX(-20%);
    }

    100% {
        -webkit-transform: translateX(5%);
        transform: translateX(5%);
    }
}

@keyframes glow1 {
    0% {
        -webkit-transform: translateX(-20%);
        transform: translateX(-20%);
    }

    100% {
        -webkit-transform: translateX(5%);
        transform: translateX(5%);
    }
}
@-webkit-keyframes glow2 {
    100% {
        -webkit-transform: translateX(-20%);
        transform: translateX(-20%);
    }

    0% {
        -webkit-transform: translateX(5%);
        transform: translateX(5%);
    }
}

@keyframes glow2 {
    100% {
        -webkit-transform: translateX(-20%);
        transform: translateX(-20%);
    }

    0% {
        -webkit-transform: translateX(5%);
        transform: translateX(5%);
    }
}
@-webkit-keyframes glow3 {
    100% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
    }

    0% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }
}

@keyframes glow3 {
    100% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
    }

    0% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }
}
@-webkit-keyframes glow4 {
    100% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }

    0% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
    }
}

@keyframes glow4 {
    100% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }

    0% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
    }
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }
}

.start_car {
    -webkit-animation-name: car;
    animation-name: car;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}
.glass {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.success_pass ul li.shake {
    animation-name: glow;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

.screen_p1{
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    animation-delay:1s;
    -webkit-animation-delay:1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    margin-left:206px;
    margin-top:34px;

}
.screen_p2{
    animation-delay:2s;
    -webkit-animation-delay:2s;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    animation-fill-mode: forwards;    
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}
.screen_p3{
    animation-delay:3s;
    -webkit-animation-delay:3s;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;

}
.screen_p4{
    animation-delay:5s;
    -webkit-animation-delay:5s;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;

}
/*翻牌动画*/
@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg); }
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg); }
}

@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg); }
    to { transform: rotateY(0); }
}
